---
type: tutorial
title: Aggiungi styling a livello di sito
description: |-
  Tutorial: Crea il tuo primo blog Astro —
  Crea un foglio di stile globale per lo styling a livello di sito
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Spoiler from '~/components/Spoiler.astro';
import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Ora che hai una pagina Su di me stilizzata, è il momento di aggiungere alcuni stili globali per il resto del tuo sito!

<PreCheck>
  - Applica stili globalmente
</PreCheck>

## Aggiungi un foglio di stile globale

Hai visto che il tag `<style>` di Astro è **scoped di default**, il che significa che influenza solo gli elementi nel suo stesso file.

Ci sono alcuni modi per definire stili **globalmente** in Astro, ma in questo tutorial, creerai e importerai un file `global.css` in ciascuna delle tue pagine. Questa combinazione di foglio di stile e tag `<style>` ti dà la possibilità di controllare alcuni stili a livello di sito e di applicare alcuni stili specifici esattamente dove li vuoi.

<Steps>
1. Crea un nuovo file nella posizione `src/styles/global.css` (Dovrai prima creare una cartella `styles`.)

2. Copia il seguente codice nel tuo nuovo file, `global.css`

    ```css title="src/styles/global.css"
    html {
      background-color: #f1f5f9;
      font-family: sans-serif;
    }

    body {
      margin: 0 auto;
      width: 100%;
      max-width: 80ch;
      padding: 1rem;
      line-height: 1.5;
    }

    * {
      box-sizing: border-box;
    }

    h1 {
      margin: 1rem 0;
      font-size: 2.5rem;
    }
    ```

3. In `about.astro`, aggiungi la seguente dichiarazione di importazione al tuo frontmatter:

    ```astro title="src/pages/about.astro" ins={2}
    ---
    import '../styles/global.css';

    const pageTitle = "Su di me";

    const identity = {
      firstName: "Sarah",
      country: "Canada",
      occupation: "Scrittrice tecnica",
      hobbies: ["fotografia", "birdwatching", "baseball"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Scrivere Documenti"];

    const happy = true;
    const finished = false;
    const goal = 3;

    const skillColor = "navy";
    const fontWeight = "bold";
    const textCase = "uppercase";
    ---
    ```

4. Controlla l'anteprima del browser della tua pagina Su di me e ora dovresti vedere nuovi stili applicati!
</Steps>

<Box icon="puzzle-piece">

## Prova tu stesso - Importa il tuo foglio di stile globale

Aggiungi la riga di codice necessaria a ogni file `.astro` nel tuo progetto per applicare i tuoi stili globali a ogni pagina del tuo sito.

<details>
<summary>✅ Mostrami il codice! ✅</summary>

Aggiungi la seguente dichiarazione di importazione agli altri due file di pagina: `src/pages/index.astro` e `src/pages/blog.astro`

```astro title="src/pages/index.astro" ins={2}
---
import '../styles/global.css';
---
```
</details>
</Box>

Apporta qualsiasi modifica o aggiunta che desideri al contenuto della tua pagina Su di me aggiungendo elementi HTML al template della pagina, staticamente o dinamicamente. Scrivi qualsiasi JavaScript aggiuntivo nel tuo script frontmatter per fornirti valori da utilizzare nel tuo HTML. Quando sei soddisfatto di questa pagina, esegui il commit delle tue modifiche su GitHub prima di passare alla prossima lezione.

<Box icon="question-mark">
### Analizza lo Schema

La tua pagina Su di me è ora stilizzata usando *sia* il file `global.css` importato *sia* un tag `<style>`.

- Gli stili da entrambi i metodi di styling vengono applicati?

    <p>
      <Spoiler>Sì</Spoiler>
    </p>

- Ci sono stili in conflitto e, in tal caso, quali vengono applicati?

    <p>
      <Spoiler>Sì, `<h1>` ha una dimensione di `2.5rem` globalmente, ma `4rem` localmente nel tag `<style>`. La regola locale `4rem` viene applicata sulla pagina Su di me.</Spoiler>
    </p>

- Descrivi come funzionano insieme `global.css` e `<style>`.

    <p>
      <Spoiler>Quando stili in conflitto sono definiti sia globalmente che nel tag `<style>` locale di una pagina, gli stili locali dovrebbero sovrascrivere qualsiasi stile globale. (Ma, ci possono essere altri fattori coinvolti, quindi controlla sempre visivamente il tuo sito per assicurarti che i tuoi stili siano applicati correttamente!)</Spoiler>
    </p>

- Come sceglieresti se dichiarare uno stile in un file `global.css` o in un tag `<style>`?

    <p>
      <Spoiler>Se vuoi che uno stile venga applicato a livello di sito, sceglieresti di usare un file `global.css`. Tuttavia, se vuoi che gli stili si applichino solo al contenuto HTML in un singolo file `.astro` e non influenzino altri elementi sul tuo sito, sceglieresti un tag `<style>`.</Spoiler>
    </p>
    
</Box>



<Box icon="check-list">
## Checklist

<Checklist>
- [ ] Posso aggiungere stili CSS globali importando un file `.css`.
</Checklist>
</Box>

### Risorse
- [Sintassi Astro vs JSX - confronto](/it/reference/astro-syntax/#differences-between-astro-and-jsx)

- [Tag `<style>` di Astro](/it/guides/styling/#styling-in-astro)

- [Variabili CSS in Astro](/it/guides/styling/#css-variables)



